<template>
  <div>
    <div class="content">
      <div class="w">
        <div class="left">
          <dl>
            <dt>推荐</dt>
            <dd class="clearfix biankuang">
              <a class="active" href="">推荐歌手</a>
            </dd>
          </dl>
          <dl>
            <dt ref="hua" id="7">华语</dt>
            <dd class="clearfix">
              <a class="hua1" href="javascript:;" @click="gaibian" id="1,7">华语男歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="hua2" href="javascript:;" @click="gaibian" id="2,7">华语女歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="hua3" href="javascript:;" @click="gaibian" id="3,7">华语组合/乐队</a>
            </dd>
          </dl>
          <dl>
            <dt ref="o" id="96">欧美</dt>
            <dd class="clearfix">
              <a class="om1" href="javascript:;" @click="gaibian" id="1,96">欧美男歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="om2" href="javascript:;" @click="gaibian" id="2,96">欧美女歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="om3" href="javascript:;" @click="gaibian" id="3,96">欧美组合/乐队</a>
            </dd>
          </dl>
          <dl>
            <dt ref="ri" id="8">日本</dt>
            <dd class="clearfix">
              <a class="rbgz1" href="javascript:;" @click="gaibian" id="1,8">日本男歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="rbgz2" href="javascript:;" @click="gaibian" id="2,8">日本女歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="rbgz3" href="javascript:;" @click="gaibian" id="3,8">日本组合/乐队</a>
            </dd>
          </dl>
          <dl>
            <dt ref="han" id="16">韩国</dt>
            <dd class="clearfix">
              <a class="hg1" href="javascript:;" @click="gaibian" id="1,16">韩国男歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="hg2" href="javascript:;" @click="gaibian" id="2,16">韩国女歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="hg3" href="javascript:;" @click="gaibian" id="3,16">韩国组合/乐队</a>
            </dd>
          </dl>
          <dl>
            <dt ref="qi" id="0">其他</dt>
            <dd class="clearfix">
              <a class="qita1" href="javascript:;" @click="gaibian" id="1,0">其他男歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="qita2" href="javascript:;" @click="gaibian" id="2,0">其他女歌手</a>
            </dd>
            <dd class="clearfix">
              <a class="qita3" href="javascript:;" @click="gaibian" id="3,0">其他组合/乐队</a>
            </dd>
          </dl>
        </div>
        <div class="right">
          <div class="right-content clearfix">
            <div class="smallbox" v-for=" (item,index) in singerList" :key="index">
              <div class="imgbox">
                <a href="">
                  <img v-lazy="item.picUrl" alt="" />
                </a>
              </div>
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {singerHot} from "../api/singer"
export default {
    data() {
        return {
            singerList:[]
        }
    },
    async created() {
        let res = await singerHot()
        this.singerList = res.artists
    },
    methods: {
        async gaibian(e){
            let type = e.target.id.split(",")[0]
            let area = e.target.id.split(",")[1]
            console.log(type,area);
            let res = await singerHot(type,area)
            console.log(res);
        }
    },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333;
}

input {
  border: none;
  outline: none;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}
/* 内容（左边） */
.w {
  width: 980px;
  margin: auto;
}

.left {
  width: 180px;
  border: 1px solid #d3d3d3;
  float: left;
}

dl {
  width: 160px;
  padding-top: 15px;
  border-bottom: 1px solid #d3d3d3;
  margin: auto;
}

dt {
  color: #333;
  height: 25px;
  padding-left: 14px;
  font-size: 16px;
  font-weight: 700;
}

dd {
  margin-bottom: 2px;
  padding-left: 14px;
}

dd a {
  float: left;
  width: 160px;
  height: 29px;
  line-height: 29px;
  font-size: 14px;
  color: #333;
}

/* 右边 */
.right {
  float: right;
  width: 798px;
}

.right-content {
  padding: 40px;
}

.right-content h3 {
  position: relative;
}

.right-content h3::after {
  content: "";
  position: absolute;
  width: 798px;
  height: 1px;
  background-color: #c20c0c;
  left: 0px;
  bottom: -15px;
}

.imgbox img {
  width: 130px;
  height: 130px;
}
.imgbox {
  width: 130px;
  height: 150px;
}

.contents {
  margin-top: 15px;
}

.smallbox {
  width: 130px;
  float: left;
  margin-left: 13px;
  margin-bottom: 15px;
}
</style>